<template>
  <div class="app-container letter-detail">
    <header class="detail-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">督察督办详情</div>
      </div>
      <div class="detail-table">
        <table>
          <tr>
            <td>标题：</td>
            <td>{{letter.letterTitle}}</td>
            <td>提交人：</td>
            <td>{{letter.creator}}</td>
            <td>责任人：</td>
            <td>{{letter.zeRenRen}}</td>
            <td>配合人：</td>
            <td>{{letter.peiHeRen}}</td>
          </tr>
          <tr>
            <td>督办类别：</td>
            <td>{{letter.letterType}}</td>
            <td>办理事项：</td>
            <td>{{letter.letterSource}}</td>
            <td>拟交办日期：</td>
            <td>{{letter.fillDate}}</td>
            <td>办结期限：</td>
            <td>{{letter.latestDate}}</td>
          </tr>
          <tr>
            <td>拟办意见：</td>
            <td>{{letter.niBanYiJian}}</td>
          </tr>
        </table>
      </div>
      <div class="detail-content">
        {{letter.letterContent}}
      </div>
    </header>
    <!--<section class="circulation-container">
      <div class="top-bar">
        <div class="top-bar-tag"></div>
        <div class="top-bar-title">办理意见</div>
      </div>
      <div class="main">

        <div class="table-container">
          <el-table>
            <el-table-column label="流转顺序"></el-table-column>
            <el-table-column label="签署人"></el-table-column>
            <el-table-column label="内容"></el-table-column>
            <el-table-column label="时间"></el-table-column>
          </el-table>
        </div>

        <div class="suggestion-container">
          <div class="top-bar">
            <div class="top-bar-title">您的意见</div>
          </div>
          <div class="section">
            <div class="comment-box">
              <el-input type="textarea" :rows="5" v-model="comment" :disabled="!showSave"></el-input>
            </div>

            <div class="btn-box" v-if="showSave">
              <el-button :loading="saveLoading" @click="submit" :disabled="isSave" v-text="btnText"></el-button>
            </div>
          </div>
        </div>

      </div>
    </section>-->
    <flow-approve-sign :flowList="flowList"></flow-approve-sign>
    <flow-approve-comment v-if="showSave"
                          :params="params"
    ></flow-approve-comment>
  </div>
</template>

<script>
  import letterAPI from '@/api/letter/letter'
  import FlowApproveComment from '@/views/components/FlowApproveComment'
  import FlowApproveSign from '@/views/components/FlowApproveSign'
  export default {
    name: "LetterDetail.vue",
    components: { FlowApproveComment, FlowApproveSign },
    data() {
      return {
        letter:{
          /*contactTel: "",
          created: "",
          creator: '',
          fillDate: "",
          latestDate: "",
          letterContent: "",
          letterId: this.$route.params.id,
          letterSource: "",
          letterState: '',
          letterTitle: "",
          letterType: "",
          niBanYiJian: "",
          peiHeRen: "",
          unitId: '',
          zeRenRen: ''*/
          contactTel: "",
          created: "",
          creator: 0,
          creatorName: "",
          fillDate: "",
          latestDate: "",
          letterContent: "",
          letterId: this.$route.params.id,
          letterSignList: [],
          letterSource: "",
          letterState: 0,
          letterTitle: "",
          letterType: "",
          niBanYiJian: "",
          peiHeRen: "",
          peiHeRenName: "",
          signCount: 0,
          signIndex: 0,
          unitId: 0,
          zeRenRen: 0,
          zeRenRenName: ""
        },
/*        saveLoading:false,
        flag:false,
        comment:''*/
        flowList: [],
        params: {
          API: letterAPI,
          url: '/work-waichu/approval-list',
          id: this.$route.params.id
        }
      }
    },
    computed:{
      showSave(){
        return this.$route.params.flag === 'true'
      },
    },
    created() {
      this.fetchData()
      // this.getFlowList()
    },
    methods: {
      getFlowList() {
        letterAPI.getFlowList(this.waiChu.waiChuId).then(res => {
          this.flowList = res.result
        })
      },
      // let-todo 没有驳回
      fetchData(){
        letterAPI.info(this.letter.letterId).then(res=>{
          this.letter = res.result
          console.log(this.letter)
        }).catch(err=>{
          console.log(err)
        })
      }
    }
  }
</script>
<style lang="scss">
</style>
<style scoped lang="scss">
  $height:35px;
  $borderColor:1px solid #e0e0e0;
  $boxShadow:0 0 3px rgba(0,0,0,0.1);

  .list-move {
    transition: transform 0.3s linear;
  }

  .app-container {
    font-size: 14px;
    padding: 15px 150px;
    background-color: #F4F9FD;
    min-height: calc(100vh - 86px);
    box-sizing: border-box;
  }

  .detail-container {
    border: $borderColor;
    margin-bottom: 20px;
    box-shadow: $boxShadow;
    overflow: hidden;
    border-radius: 5px;
    .detail-table {
      padding: 15px;
      line-height: 30px;
      background-color: white;
    }
    .detail-content {
      background-color: white;
      padding: 15px;
      line-height: 30px;
      border-top: $borderColor;
    }
  }

  .circulation-container {
    border: $borderColor;
    margin-bottom: 20px;
    box-shadow: $boxShadow;
    overflow: hidden;
    border-radius: 5px;
    .main {
      padding: 15px;
      background: white;

      i {
        font-size: 15px;
        cursor: pointer;
        transition: all 0.1s linear;
        color:gray;
        &:hover {
          color: #409EFF;
        }
        &.template-add {
          margin-left: 10px;
          font-size: 20px;
        }
      }

      .table-container {
        margin-bottom: 20px;
      }
      .suggestion-container {
        border: 1px solid #eee;
        box-shadow: 0 0 1px rgba(0,0,0,0.1);
        .section {
          padding: 15px;
          display: flex;
          justify-content: space-between;
          .comment-box {
            width: 70%;
            margin-right: 20px;
          }
          .btn-box {
            width: 30%;
          }
        }
      }

    }
  }

  table tr td:nth-of-type(odd){
    text-align: right;
    width: 10%;
    color: #606060;
    font-size: 13px;
  }
  table tr td:nth-of-type(even){
    text-align: left;
    padding-left: 10px;
    width: 15%;
    box-sizing: border-box;
    color: #555555;
  }

  .top-bar {
    height: $height;
    line-height: $height;
    padding: 0 15px;
    background-color: #FBFBFB;
    border-bottom: $borderColor;
    display: flex;
    justify-content: space-between;
    .top-bar-tag {
      width: 5px;
      height: $height;
    }
    .top-bar-title{
      font-size: 16px;
    }
    .top-bar-section {

    }
  }



</style>

